<template>
  <div class="page pd-l ta-c" >
    <div style="padding-top: 80px;" >
      <div class="fs-xh fw" style="margin-bottom: 40px;">你的身份是</div>
      <div class="weui-flex">
        <div class="weui-flex__item" @tap="pageRole = 'teacher'">
          <div class="fs-xxl fw pdb-l">
            老师
            <image v-if="pageRole == 'teacher'" style="width: 25px;height: 25px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/icon-check.png" mode="widthFix"></image>
          </div>
          <image style="width: 100px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/teacher.png" mode="widthFix"></image>
        </div>
        <div class="weui-flex__item" @tap="pageRole = 'student'">
          <div class="fs-xxl fw pdb-l">
            学生
            <image v-if="pageRole == 'student'" style="width: 25px;height: 25px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/icon-check.png" mode="widthFix"></image>
          </div>
          <image style="width: 104px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/student.png" mode="widthFix"></image>
        </div>
      </div>
      <div class="pdh-l" style="padding-top: 30px;">
        <button class="ui btn primary" :class="{'disabled': !pageRole}" @tap="onOk">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'

export default {
  data () {
    return {
      pageRole: ''
    }
  },
  components: {
    PageCommon
  },
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  mounted () {
    this.pageRole = this.role
  },
  methods: {
    ...mapActions([
      'setRole'
    ]),
    onOk () {
      this.setRole(this.pageRole)
      this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '修改成功')
      wx.navigateBack()
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
.page {
  background-color: @colorWhite;
  height: 100%;
  box-sizing: border-box;
}
img {
  width: 80px;
  height: 80px;
}
.role {
  border: 1px solid @colorLightGray;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  background: white;
  &._c {
    border: 1px solid @colorTeal;
    box-shadow: 0 0 20px rgba(0, 173, 206, .3);
  }
}
</style>
